<template>
  <v-container fluid fill-height class="statistics-wrapper">
    <v-layout row wrap>
      <v-flex md12 class="mb-3">
        <v-tabs v-model="tabs" fixed-tabs color="transparent" slot="extension" @input="tabClicked">
          <v-tabs-slider color="primary"></v-tabs-slider>
          <v-tab v-for="(item, index) in toggleItems" :key="index" :href="`#${item.value}`" class="primary--text">
            <span class="title">{{ item.text }}</span>
          </v-tab>
        </v-tabs>
      </v-flex>
      <v-flex d-flex md12>
        <!-- 查询数据表格 -->
        <v-data-table hide-actions :loading="showProgress" :headers="headers" :items="tableData" class="elevation-1">
          <v-progress-linear slot="progress" color="teal" height="5" indeterminate></v-progress-linear>
          <template slot="items" slot-scope="props">
            <td class="text-xs-center">
              <v-avatar :color="props.item.color" size="24" class="white--text">{{props.item.ranking}}</v-avatar>
            </td>
            <td class="text-xs-center">
              <v-avatar size="36">
                <img :src="props.item.headUrl" alt="">
              </v-avatar>
            </td>
            <td class="text-xs-center subheading">{{ props.item.lftid }}</td>
            <td class="text-xs-center subheading">{{ props.item.nickname }}</td>
            <td class="text-xs-center subheading">{{ props.item.proxyLevel }}</td>
            <td class="text-xs-center subheading">{{ props.item.superId }}</td>
            <td class="text-xs-center subheading">{{ props.item.superNickname }}</td>
            <td class="text-xs-center subheading">{{ props.item.saleCount }}</td>
          </template>
          <!-- 没有数据时显示的提示 -->
          <template slot="no-data">
            <div class="text-md-center">
              <v-icon color="yellow darken-3">warning</v-icon>
              <span class="subheading">暂无数据</span>
            </div>
          </template>
        </v-data-table>
        <!-- 表格分页 -->
        <div class="text-xs-center my-2">
          <v-pagination @input="pageChange" circle :length="pagination.pageCount" :total-visible="pagination.totalVisible" v-model="pagination.page"></v-pagination>
        </div>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
import * as agent from "../../api/agent";
export default {
  data: () => ({
    tabs: null,
    btnToggle: null,
    showProgress: false,
    toggleItems: [
      { text: "今日", value: 5 },
      { text: "昨日", value: 6 },
      { text: "本月", value: 1 },
      { text: "上月", value: 2 },
      { text: "季度", value: 3 },
      { text: "总计", value: 4 }
    ],
    limit: 10,
    offset: 0,
    dialog: false,
    allowEdit: true,
    pagination: {
      page: 1,
      pageCount: 1,
      totalVisible: 7
    },
    tableData: [],
    formTitle: "代理资料",
    headers: [
      { text: "排行", value: "lftid", align: "center", sortable: false },
      { text: "头像", value: "headUrl", align: "center", sortable: false },
      { text: "代理ID", value: "nickname", align: "center", sortable: false },
      {
        text: "代理昵称",
        value: "saleLevel",
        align: "center",
        sortable: false
      },
      {
        text: "代理等级",
        value: "saleLevel",
        align: "center",
        sortable: false
      },
      { text: "上级ID", value: "superId", align: "center", sortable: false },
      { text: "上级昵称", value: "sale", align: "center", sortable: false },
      { text: "销量", value: "sale", align: "center", sortable: false }
    ],
    tableData: [],
    editedIndex: -1,
    editedItem: {
      name: "",
      headUrl: 0,
      lftid: 0,
      nickname: 0,
      telephone: 0,
      superId: 0,
      saleLevel: 1,
      proxyLevel: 1,
      createTime: "2018-4-19"
    }
  }),
  mounted() {
    // 获取到对应的游戏类型
    this.$nextTick(() => {
      $Vue.$off("refreshPage");
      $Vue.$on("refreshPage", () => {
        this.isSearch = false;
        this.offset = 0;
        this.getSaleRank();
      });
      $Vue.$off("areaCodeChange");
      $Vue.$on("areaCodeChange", () => {
        this.isSearch = false;
        this.offset = 0;
        this.getSaleRank();
      });
    });
  },
  watch: {
    // 监测路由参数变化
    $route(to, from) {
      console.log(to.params.gametype);
    }
  },
  methods: {
        getSaleRank() {
      let params = {
        offset: this.offset,
        limit: this.limit,
        proxyType: this.tabs,
        type: 1
      };
      let rankData = [];
      agent.getSaleRank.r(params).then(({ data }) => {
        // console.log(data)
        if(data.data){
          rankData = data.data.dataList[0].zuanshiRank;
        _.forEach(rankData, (item, index) => {
          item.ranking = index + 1 + this.offset;
          item.color = 'teal lighten-1'
          item.ranking === 1 ? item.color = 'red' : void 0;
          item.ranking === 2 ? item.color = 'orange darken-2' : void 0;
          item.ranking === 3 ? item.color = 'amber' : void 0;
        });
        this.tableData = rankData;
        this.pagination.pageCount = data.data.totalCount
          ? Math.ceil(data.data.totalCount / this.limit)
          : 1;
        }
        
      });
    },
    initialize() {
      this.tableData = [
        {
          saleLevel: "Frozen Yogurt",
          headUrl: "https://countryflags.io/cn/flat/32.png",
          lftid: 6.0,
          nickname: "搭街坊",
          telephone: "1875854669",
          superId: 123000,
          saleLevel: 1,
          sales: 888,
          proxyLevel: 1,
          createTime: "2018-4-19",
          totalSale: 3655
        },
        {
          saleLevel: "Ice cream sandwich",
          headUrl: "https://countryflags.io/cn/flat/32.png",
          lftid: 9.0,
          nickname: "贾斯丁",
          telephone: "18861544141",
          superId: 100010,
          saleLevel: 1,
          sales: 502,
          proxyLevel: 2,
          createTime: "2018-4-19",
          totalSale: 4654
        }
      ];
    },
    tabClicked() {
      console.log(this.tabs)
      this.getSaleRank();
    },
    pageChange(page) {
      this.offset = (page - 1) * this.limit;
      this.getSaleRank();
    }
  }
};
</script>

<style lang="less" scoped>

</style>


